<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<link href="../assets/layui/css/layui.css" rel="stylesheet" />
		
		<script src="../assets/layui/layui.all.js"></script>
		<script src="../assets/jquery/jquery-1.9.1.min.js"></script>
		
		<style type="text/css">
			.row{
				margin:0;
			}
			/* layui 表格行高 */
			.layui-table-cell{
				height:20px;
				line-height:20px;
			}
		</style>
		
	</head>
	<body>
		
		<div class="page-content">
			<div class="row">
				<div class="col-xs-12">ShowSerson</div>
			</div>
			<div class="row">
				<div class="col-xs-12">
					<table class="layui-hide" id="layui-table"></table>
				</div>
			</div>
		</div>
		
		<script type="text/javascript">
			var basePath="<%=basePath %>";
			$(function () {
	
			    //初始化Table
				initTable();
				getPersonData();
			});
			
			function initTable(){
				
				layui.use('table', function(){
					var table = layui.table;
					table.render({
						elem: '#layui-table',	//表格id
						url: basePath+'/person/getPersonDataL',
						height:"full-50",
						limit:5,	//每页几条
						limits:[5,10,20],	//每页条数下拉框选项
						cols: [[
							    {field: 'pid',align: 'center',width: '30%',title: '人物id',unresize:true},
								{field: 'pname',align: 'left',width: '10%',title: '人名',unresize:true},
								{field: 'age',align: 'center',width: '10%',title: '年龄',unresize:true},
								{field: 'deptid',align: 'left',width: '10%',title: '部门id',unresize:true},
								{field: 'dname',align: 'center',width:'10%',title: '部门名称',unresize:true},
								{field: 'loc',align: 'center',width: '30%',title: '部门地址',unresize:true}
						]],
						page: true	//开启分页，后台的参数为page（第几页）和limit（每页条数）
					});
				});
				
			}
			
			function getPersonData(){
        		$.ajax({
        			url:"http://localhost:8080/firweb/person/getPersonData",
        			type:"post",
        			data:{"pageNumber":1,"pageSize":3},
        			dataType:"json",
        			success:function(data){
        				console.log(data);
        				
        			},
        			error:function(data){
        				console.log(data);
        			}
        			
        		});
        	}
			
		</script>
	</body>
</html>